<script>

export default {
  name: "calculateTheListener",
  data() {
    return {
      firstName: '',
      secondName: '',
      fullName: '',
      obj:{
        name:'小明'
      }
    }
  },
  //   计算属性 属性不能与data中定义的属性相同
    computed:{
      /*fullName(){
          return this.firstName + this.secondName
      }*/
      /*fullName:{
        get(){
         return this.firstName + this.secondName
        },
        set(val){
          console.log(val,'set')
          this.firstName=val[0]
          this.secondName=val[1]
        }
      }*/
      // 对obj进行深拷贝，把obj的值重新赋给objNew
      objNew(){
        return JSON.parse(JSON.stringify(this.obj))
      }
    },
  // 监听属性
  watch: {
    // firstName(newVal,oldVal){
    //   console.log(newVal)
    //   console.log(oldVal)
    //   this.fullName=newVal+this.secondName
    // },
    // secondName(newVal,oldVal){
    //   console.log(newVal)
    //   console.log(oldVal)
    //   this.fullName=this.firstName+newVal
    // }
    firstName: {
      handler(newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
      // 立即监听
      immediate: true,
      //   深度监听
      deep:true
    },
/*    obj:{
      handler(newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
      //   深度监听
      deep:true
    }*/
    /*'obj.name':{
      handler(newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
      //   深度监听
      deep:true
    }*/
    objNew:{
      handler(newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
      //   深度监听
      deep:true
    }
  },
  methods: {
    getFullName() {
      // this.fullName = this.firstName + this.secondName
      this.obj.name='小红'
      /*let msg = '这是msg';
      console.log(msg)
      msg = '修改后的msg'
      console.log(msg)
      let obj1 = {
        age: 20
      }
      console.log(obj1)
      obj1.age = 10
      console.log(obj1)*/
      // obj1是引用数据类型，打印的obj1是一个地址上的，打印的都是最新的
    }

  },
  // updated() {
  //   this.fullName = this.firstName + this.secondName
  // }
}
</script>

<template>
  <div>
    <!--    计算监听-->
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="secondName"><br>
    姓名：<input type="text" v-model="fullName">{{ fullName }}
    <button @click="getFullName">获取姓名</button>
    {{obj.name}}
  </div>
</template>

<style scoped lang="less">

</style>